<template>
  <div class="hot">
    <Poster :playlist="playList"></Poster>
    <SongList
      @play="$emit('play', $event)"
      :songs="showList"
      :showNum="showNumber"
    ></SongList>
    <Loading v-if="showLoading"></Loading>
  </div>
</template>

<script>
import SongList from "@/components/SongList.vue";
import Loading from "@/components/Loading.vue";
import Poster from "@/components/Poster.vue";

export default {
  name: "Hot",
  data() {
    return {
      hotList: [],
      showList: [],
      playList: null,
      showNumber: true,
      limit: 20,
      showLoading: true,
    };
  },
  components: {
    SongList,
    Loading,
    Poster,
  },
  created() {
    this.$http.get("/playlist/detail",{
      params:{
        id:3778678
      }
    }).then((dlist) => {
      this.playList = dlist.data.playlist;
      this.hotList = dlist.data.playlist.tracks.map((d, index) => {
        let data = d;
        data.song = {
          artists: d.ar,
          privilege: {
            playMaxbr: dlist.data.privileges[index].playMaxbr,
          },
        };
        return data;
      });
      this.showList = this.hotList.slice(0, this.limit);
      this.showLoading = false;

      let that = this;

      window.onscroll = function () {
        var scrollTop = document.documentElement.scrollTop;
        var windowHeight = document.documentElement.clientHeight;
        var scrollHeight = document.documentElement.scrollHeight;
        if (Math.ceil(scrollTop + windowHeight) >= scrollHeight) {
          that.showLoading = true;
          let num = that.showList.length + that.limit;
          that.showList = that.hotList.slice(0, num);
          that.showLoading = false;
        }
        // console.log("Math.ceil(scrollTop + windowHeight)",Math.ceil(scrollTop + windowHeight))
        // console.log("scrollHeight",scrollHeight)
      };
    });
  },
  methods: {

  },
};
</script>
<style lang="less" scoped>
.hot {
  padding-top: 15px;
  padding-bottom: 70px;
  .loademore {
    line-height: 20px;
    text-align: center;
    background-color: #fbeeac;
    color: #8ac4d0;
    letter-spacing: 5px;
  }
}
</style>
